<template>
	<div class="u-general-color" style="color: #e61111;">
		<div>
			<!-- 商品信息 -->
			<section class="j-block bg-white">
				<div id="imgbox">
					<div class="n-imgbox">
						<div>
							<u-swiper :list="list" height="375" border-radius="0"></u-swiper>
						</div>
					</div>
				</div>

				<div class="n-price" v-if="form.LevelC > 0 && form.LevelA > 0">
					<div class="n-price__left">
						<span class="curprice"><span class="curnum">¥{{form.LevelC?form.LevelC:0}}-{{form.LevelA?form.LevelA:0}}测评奖励</span></span>
					</div>
				</div>

				<div id="J_wb_rebate" style="margin: 10px 10px 0px;"></div>

				<div class="n-prdinfo">
					<h4 class="tit f-els-2">{{form.CommodityName?form.CommodityName:''}}</h4>
					<div class="taginfo" v-if="form.KeyWord">
                        <div class="u-pr-5" v-for="(item, index) in form.KeyWord.split(',')" :key="index">
                            <u-tag
							  :text="item"
							  type="info"
							  mode="dark"
							  bgColor="#f7f5f8"
                              borderColor="#f7f5f8"
                              color="#828282"
						  ></u-tag>
                        </div>
					</div>
				</div>
			</section>
			
			<!-- 活动须知 -->
			<p class="v-sperate"></p>
			<section class="j-block bg-white">
				<div id="qualityreport"></div>
				<div class="n-goodsdetailbar">
					<p class="txt">活动须知</p>
					<img class="v-img" src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				
				<div id="infoblocks">
					<ul class="n-activitybox">
						<li class="itm n-expressinfo">
							<div class="name">测评总人数：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.JoinQuota?form.JoinQuota:0}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name u-flex">报名截止时间：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.JoinEndTime}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">提交测评报告周期：</div>
							<div class="cnt expressinfo f-els-1" style="width: 380rpx;">
								<p class="expresstxt itm-value">
									报名后{{form.LimitDays?form.LimitDays:0}}天内提交，逾期作废
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">验收时间：</div>
							<div class="cnt expressinfo f-els-1" style="width: 450rpx;">
								<p class="expresstxt itm-value">
									提交测评报告后3-5个工作日内验收
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo" v-if="form.EnableProviderJoinLimit != '1'">
							<div class="name">验收发放报酬：</div>
							<div class="cnt expressinfo f-els-1" style="width: 440rpx;">
								<p class="expresstxt itm-value">
									¥{{form.LevelC?form.LevelC:0}}（并非最终报酬，评级后发放差额）
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">评级开始时间：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.EndTime}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo" v-if="form.EnableProviderJoinLimit != '1'">
							<div class="name">评级发放差额报酬：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									¥{{BCDiff?BCDiff:0}}-¥{{ACDiff?ACDiff:0}}（C级无差额发放）
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo" v-if="form.InspectorName">
							<div class="name">验收评级人员：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.InspectorName?form.InspectorName:''}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<div v-if="form.EnableDistribution == '1'">
							
							<li class="itm n-expressinfo" v-if="form.OriginalPrice">
								<div class="name">市场价：</div>
								<div class="cnt expressinfo f-els-1">
									<p class="expresstxt itm-value">
										{{form.OriginalPrice?form.OriginalPrice:'0'}}元
									</p>
								</div>
								<div class="v-linkicon"></div>
							</li>
							<li class="itm n-expressinfo" v-if="form.UnitPrice">
								<div class="name">玫丽专享价：</div>
								<div class="cnt expressinfo f-els-1">
									<p class="expresstxt itm-value">
										{{form.UnitPrice?form.UnitPrice:'0'}}元
									</p>
								</div>
								<div class="v-linkicon"></div>
							</li>
							<li class="itm n-expressinfo" v-if="form.DistributionReward">
								<div class="name">团销佣金(件/元)：</div>
								<div class="cnt expressinfo f-els-1">
									<p class="expresstxt itm-value">
										{{form.DistributionReward?form.DistributionReward:'0'}}元
									</p>
								</div>
								<div class="v-linkicon"></div>
							</li>
						</div>
						
					</ul>
				</div>
				<div id="combobox"></div>
			</section>
			
			<!-- 测评报酬规则 -->
			<p class="v-sperate" v-if="form.EnableProviderJoinLimit != '1'"></p>
			<section class="j-block bg-white" v-if="form.EnableProviderJoinLimit != '1'">
				<div id="qualityreport"></div>
				<div class="n-goodsdetailbar">
					<p class="txt">测评报酬规则</p>
					<img class="v-img" src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				<div id="infoblocks">
					<ul class="n-activitybox">
						<li class="itm n-expressinfo">
							<div class="name">A级测评报酬：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.LevelA?form.LevelA:0}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">A级最高名额：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.LevelANum?form.LevelANum:0}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">A级评级标准：</div>
							<div class="cnt expressinfo f-els-1" style="width: 480rpx;">
								<p class="expresstxt itm-value">
									{{form.LevelACriterion?form.LevelACriterion:''}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">B级测评报酬：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.LevelB?form.LevelB:0}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">B级最高名额：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.LevelBNum?form.LevelBNum:0}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">B级评级标准：</div>
							<div class="cnt expressinfo f-els-1" style="width: 480rpx;">
								<p class="expresstxt itm-value">
									{{form.LevelBCriterion?form.LevelBCriterion:''}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						
						<li class="itm n-expressinfo">
							<div class="name">C级测评报酬：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									{{form.LevelC?form.LevelC:0}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">C级评级标准：</div>
							<div class="cnt expressinfo f-els-1"  style="width: 480rpx;">
								<p class="expresstxt itm-value">
									{{form.LevelCCriterion?form.LevelCCriterion:''}}
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
						<li class="itm n-expressinfo">
							<div class="name">备注：</div>
							<div class="cnt expressinfo f-els-1">
								<p class="expresstxt itm-value">
									完成测评任务即可获得C级报酬
								</p>
							</div>
							<div class="v-linkicon"></div>
						</li>
					</ul>
				</div>
				<div id="combobox"></div>
			</section>
			
			<!-- 测评活动要求 -->
			<p class="v-sperate"></p>
			<section class="j-block bg-white">
				<div id="qualityreport"></div>
				<div class="n-goodsdetailbar">
					<p class="txt">测评活动要求</p>
					<img class="v-img" src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				<div class="u-pb-40" style="margin: 10px;">
					<u-parse :content="this.escape2Html(form.Remarks)"></u-parse>
				</div>
			</section>
			
			<!-- 报告验收标准 -->
			<p class="v-sperate"></p>
			<section class="j-block bg-white">
				<div id="qualityreport"></div>
				<div class="n-goodsdetailbar">
					<p class="txt">报告验收标准</p>
					<img class="v-img" src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				<div class="u-pb-40" style="margin: 10px;">
					<u-parse :content="this.escape2Html(form.Requirements)"></u-parse>
				</div>
			</section>
			
			<!-- 商品图文详情 -->
			<p class="v-sperate"></p>
			<section class="j-block bg-white">
				<div id="qualityreport"><!--Regular if72--></div>
				<div class="n-goodsdetailbar">
					<p class="txt">商品图文详情</p>
					<img class="v-img" src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				<div class="u-pb-40" style="margin: 10px;">
					<u-parse :content="this.escape2Html(form.CommodityDetail)"></u-parse>
				</div>
			</section>
		</div>

		<article class="m-buybar">
			<div class="btn-wrap">
				<div @click="CheckData" class="collect u-pl-10">
					<div style="margin: 0 auto;">
						<u-icon name="chat" color="#9d9d9d" size="25"></u-icon>
					</div>
					<span>客服</span>
				</div>
				<div @click="CheckData" class="collect">
					<div style="margin: 0 auto;">
						<u-icon name="share" color="#9d9d9d" size="25"></u-icon>
					</div>
					<span>分享</span>
				</div>
				<a href="#" class="view-pro btn" @click="CheckData" v-if="ViewProgressBtn">查看进度</a>
				<a href="#" class="recovery btn" @click="CheckData" v-if="EndEvaluationBtn">回收名额</a>
				<a href="#" class="buynow btn tpink-btn-bgcolor" @click="CheckData" v-if="EndEvaluationBtn">结束评测</a>
				<a href="#" class="buynow btn tpink-btn-bgcolor" @click="CheckData" v-if="!EndEvaluationBtn && form.EnableProviderJoinLimit == '0'">报名评测</a>
				<a href="#" class="buynow btn tpink-btn-bgcolor" @click="CheckData" v-if="!EndEvaluationBtn && form.EnableProviderJoinLimit == '1'">领取样品测评</a>
				
			</div>
		</article>
		<InvitationCode ref="invitationCodeRef" @childEvent="handleChildEvent" />
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				form: {
					MainDocUnid: ''
				},
				UserCount_Show: false,
				list: [],
				img: [],
				Collected: false,
				EndEvaluationBtn: false,
				EndEvaluation_Show: false,
				isFav_chance: false,//是否已收藏
				CustomerService_Show: false,
				CustomerService: {},
				TipsShow: false,
				TipsContent: '',
				JoinEndTimeContent: '测评中最迟的参与报名时间，到此时间将无法报名参与评测。',
				EndTimeContent: '测评中最迟的测评验收时间，到此时间测评将结束所有验收环节进入评级环节。到达该时间，平台会收回已报名但未提交测评报告的拍档，同时会以未验收(作废)来标识已提交测评报告但验收人未按时验收的拍档，最后让该评测进入评级环节。在评级环节，评级人可以从已验收的拍档中按评级比例定好的人数上限，选择评定“A级-优秀”、“B级-良好”，给予这些拍档增值奖励。',
				LimitDaysContent: '当拍档报名获得测评资格后，拍档将被要求在此周期(天)内提交第1次测评报告，否则将以过期作废为由收回拍档资格让予其他人。若拍档在临近评级开始时间前报名，且按此周期(天)算出的时间超出评级开始时间，则以评级开始时间为拍档最后提交测评报告的时间，超过该时间未提交测评报告的也将以过期作废为由收回拍档的资格。',
				RateContent: '允许从私有场景的所有拍档储备中，选择一拍档来负责对当前测评的验收和后续评级动作。让采购人只负责采购付款，指定更专业的人做验收和评级。',
				CouponAmountContent: '若其他购买者使用发放给测评师的专属优惠码购买本商品时，商品真实成交价格为：商品标价-优惠券额。优惠券额为整数，且不得大于商品标价，测评发起时请认真核算该优惠券额。',
				DistributionRewardContent: '若其他购买者使用发放给测评师的专属优惠码购买本商品，商品每成交N件，专属优惠码对应的测评师可额外获得分销佣金奖励N份，最多可到商品库存清零为止。分销佣金为整数，且不得大于商品标价，测评发起时请认真核算该分销佣金。',
				ViewProgressBtn: false,
				IncompleteInfo_show: false,
				IncompleteInfo_text: '',
				EvaluatorInfo_url: '',
				Statement_show: false,
				BCDiff: '',// B/C级测评报酬差额
				ACDiff: '',//  A/C级测评报酬差额
				RegisterProvider_show: false,
				RegisterProvider_title: '',
				RegisterProvider_text: '',
				RegisterProvider_url: '',
			}
		},
		
		onShow() {
			if(this.isNotNull(this.form.MainDocUnid)){
				this.getPromoteDetails()
			}
		},
		
		onLoad(options) {
			
			// 主文档id
			this.form.MainDocUnid = options.docUnid
			if(this.isNotNull(this.form.MainDocUnid)){
				this.getPromoteDetails()
			} else {
				this.showMSG('error','数据有误')
				setTimeout(() => {
					this.goBack()
				}, 1500)
			}
		},
		
		methods: {
			/**
			 * 获取测评任务详情
			 */
			async getPromoteDetails() {
			  const userInfo = uni.getStorageSync('userInfo')
			  let result = await this.$u.api.unifyRequest({
					appid: 'ProductPromote',
					wf_num: 'R_ProductPromote_BL004',
					docUnid: this.form.MainDocUnid,
					userId: userInfo.userId,
					nickName: userInfo.nickName,
				    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					this.isFav_chance = result.isFav_chance
					this.form = result.data
					if(this.isNotNull(this.form.Pictures)){
						this.list = this.form.Pictures.split(",")
					}
					this.form.Partnerid = userInfo.userId// 参与者id
					this.form.PartnerName = userInfo.nickName;// 参与者昵称
					this.form.MainDocUnid = result.data.WF_OrUnid;// 主文档id
					this.form.MainTaskNumber = result.data.TaskNumber;// 主单号
					this.form.Rewards = result.data.LevelC//C级奖励
					
					// 判断当前用户身份，显示不同按钮
					if(this.form.Initiatorid == userInfo.userId){
						// 1.当前用户为任务发起人
						this.EndEvaluationBtn = true;// 显示结束测评按钮，发起者可以结束当前实例
						this.ViewProgressBtn = true;// 有查看验收成果进度的权限
						
					} else if(this.form.Inspectorid == userInfo.userId){
						// 2.当前用户为原验收人
						this.ViewProgressBtn = true;// 有查看验收成果进度的权限
						
					} else if((this.form.AgentStatus == '1') && this.isNotNull(this.form.AgentInspectorid) && this.form.AgentInspectorid == userInfo.userId){
						// 3.是否为代理验收人
						this.ViewProgressBtn = true;//有查看验收成果进度的权限
					}
					
					// 客服信息
					if(this.isNotNull(result.data.CustomerService)){
						this.CustomerService = result.data.CustomerService
						console.log(this.CustomerService)
					}
					
					// 计算测评报酬差额
					this.BCDiff = (parseFloat(this.form.LevelB) - parseFloat(this.form.LevelC)).toFixed(2);// B/C级测评报酬差额
					this.ACDiff = (parseFloat(this.form.LevelA) - parseFloat(this.form.LevelC)).toFixed(2);// 级测评报酬差额
				}
			},
			
            /**
			* 判断用户是否已登录，如果登录则跳转到指定页面，否则弹出提示并跳转到登录页面
			*/
			CheckData() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!this.isNotNull(userInfo.userId)) {
					this.showMSG('none', '请先登录！')
					setTimeout(() => {
						this.checkLogin()
					}, 1500)
				}else{
					//通过$refs获取子组件的引用，然后调用子组件的方法
					this.$refs.invitationCodeRef.isExistInvitationCode();
				}
			},

			/**
			 * 验证完邀请码后回调方法
			 */
			handleChildEvent() {
                let url = '/pages_private_scene2/ProductPromote/SignUp?docUnid=' + this.form.MainDocUnid
				this.toMiniProgram(url)
			},
             
		}
	}
</script>

<style scoped>
	/*  购物车  */
	.n-imgbox {
		position: relative;
		width: 100%;
	}

	.n-imgbox .n-slideimg {
		position: relative;
		z-index: 0;
		width: 100%;
		padding-top: 80%;
		height: auto;
		overflow: hidden;
		background: none;
	}

	.n-imgbox .n-slideimg .imglist {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		white-space: nowrap;
		line-height: 0px;
		font-size: 0px;
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		transition-duration: 0ms;
		-webkit-transition-duration: 0ms;
	}

	.n-imgbox .n-slideimg .imglist .itm {
		display: inline-block;
		width: 100%;
	}

	.n-imgbox .n-slideimg .imglist .v-img {
		width: 80%;
		margin: 0 10%;
		background-size: 62px;
	}

	.n-imgbox .n-slideimg .imgpagebox {
		position: absolute;
		white-space: nowrap;
		bottom: 16px;
		width: 100%;
		padding: 0 20px;
		line-height: 0;
		text-align: center;
		font-size: 0;
	}

	.n-imgbox .n-slideimg .imgpagebox .dot {
		display: inline-block;
		vertical-align: middle;
		width: 6px;
		height: 6px;
		margin-right: 9px;
		border-radius: 20px;
		background-color: #000;
	}

	.n-imgbox .n-slideimg .imgpagebox .dot.active {
		width: 8px;
		height: 8px;
		border: 1px solid #000;
		background-color: #fff;
	}

	.n-imgbox .tagbox {
		position: absolute;
		right: 15px;
		bottom: 15px;
		width: 4rem;
		height: 4rem;
	}

	.n-imgbox .tagbox .v-tagimg {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.n-price {
		padding-left: 10px;
		height: 50px;
		/* line-height: 50px; */
		width: 100%;
		/* font-size: 0px; */
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		line-height: 110rpx;
	}

	.n-price .curprice {
		font-size: 15px;
		color: #e31436;
	}

	.n-price .curprice .curnum {
		font-size: 22px;
		font-weight: bold;
	}

	.n-price .mrkprice {
		text-decoration: line-through;
		margin-left: 8px;
		font-size: 13px;
		color: #999;
	}

	.n-price .tag {
		display: inline-block;
		padding: 0 5px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		margin-left: 10px;
		vertical-align: 2px;
		font-size: 11px;
		color: #fff;
		background: #ff8587;
		border-radius: 3px;
	}

	.n-price .apptxt {
		float: right;
		padding: 3px 10px 0 0;
		font-size: 12px;
		color: #e31436;
	}

	.n-price .u-rtarr-1 {
		border-color: #e31436 #e31436 transparent transparent;
	}

	.n-price .f-fwb {
		font-weight: bold;
	}
	
	.n-prdinfo {
		margin: 0 10px 10px;
		border-top: 1px solid #fff;
	}

	.n-prdinfo .presaletag {
		display: inline-block;
		height: 17px;
		line-height: 17px;
		padding: 0 6px;
		margin-right: 2px;
		background: #96c9ec;
		color: #fff;
		border-radius: 2px;
		font-size: 13px;
		font-weight: normal;
	}

	.n-prdinfo .supermarkettag {
		display: inline-block;
		height: 17px;
		line-height: 15px;
		padding: 0 6px;
		margin-right: 2px;
		color: #e31436;
		font-size: 12px;
		font-weight: normal;
		border: 1px solid #e31436;
		-webkit-transform: translateY(-1px);
		transform: translateY(-1px);
	}

	.n-prdinfo .supermarkettag.z-mr {
		margin-right: 5px;
	}

	.n-prdinfo .tit {
		line-height: 18px;
		/* padding-top: 10px; */
		margin-bottom: 6px;
		width: 100%;
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}

	.n-prdinfo .subtit {
		font-size: 13px;
		color: #333;
		line-height: 21px;
	}

	.n-prdinfo .subtit .spec {
		color: #e31436;
	}

	.n-prdinfo .presaletxt {
		color: #f00;
	}

	.n-prdinfo .taginfo {
		margin-top: 10px;
		background: #fff;
		zoom:1;
        display: flex;
        flex-wrap: wrap;
    }

	.n-prdinfo .taginfo:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-prdinfo .taginfo .v-flagimg {
		float: left;
		display: block;
		width: 16px;
		height: 16px;
		margin-right: 6px;
	}

	.n-prdinfo .taginfo .tagtxt {
		float: left;
		margin-right: 10px;
		font-size: 12px;
		color: #666;
	}
	
	.n-activitybox {
		margin: 0 20rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
	}

	.n-activitybox .itm {
		position: relative;
		padding: 9px 0;
		/* border-bottom: 1px solid #f0f0f0; */
		zoom:1;}

	.n-activitybox .itm:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-activitybox .itm .name {
		display: inline-block;
		float: left;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		color: #a9a6a6;
	}

	.n-activitybox .itm .cnt {
		/* margin-left: 50px; */
		padding-top: 1px;
		/* padding-right: 10px; */
		float: left;
		display: inline-block;
	}

	.n-activitybox .itm:last-child {
		border-bottom: none;
	}

	.n-activitybox .v-linkicon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: 200px;
	}

	.n-skubody .cntbox .itm {
		border-bottom: 1px solid #ddd
	}

	.n-skubody .cntbox .itm:last-child {
		border-bottom: none
	}

	.n-brandbox .tit {
		height: 45px;
		line-height: 45px;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
	}

	.n-brandbox .brandwrap .name {
		padding-top: 4px;
		width: 50%;
		font-size: 13px;
		color: #333;
	}

	.n-brandbox .brandwrap .txt {
		padding-top: 3px;
		font-size: 13px;
		color: #666;
	}

	.n-brandbox .prdlist .itm {
		display: inline-block;
		/* width: 3.333333rem; */
		width: 7rem;
		/* margin-right: 0.266667rem; */
		margin-right: 0.5rem;
		vertical-align: top;
	}

	.n-brandbox .prdlist .itm .v-link {
		display: block;
	}

	.n-brandbox .prdlist .itm .v-img {
		display: block;
		/* width: 3.333333rem; */
		/* height: 3.333333rem; */
		width: 7rem;
		height: 7rem;
		background-size: 62px;
	}

	.n-brandbox .prdlist .itm .subtit {
		text-align: center;
		line-height: 1rem;
		height: 2rem;
		word-break: break-word;
		white-space: normal;
		margin: 6px 0 4px;
		font-size: 12px;
		color: #333;
	}

	.n-brandbox .prdlist .itm .priceinfo {
		text-align: center;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-top: 6px;
		font-size: 12px;
	}

	.n-brandbox .prdlist .itm .priceinfo .curprice {
		font-size: 13px;
		color: #e73c3c;
	}

	.n-brandbox .prdlist .itm .priceinfo .mrkprice {
		text-decoration: line-through;
		font-size: 10px;
		color: #999;
	}
	
	.n-description .txt {
		/* float: left; */
		position: relative;
		margin: 0 50rpx;
		line-height: 22px;
		font-size: 12px;
	}

	.n-description .txt:after {
		position: absolute;
		content: "";
		top: 8px;
		left: -10px;
		width: 6px;
		height: 6px;
		font-size: 20px;
		background: #ff8587;
		border-radius: 50%;
	}

	.n-commentbox .tit {
		position: relative;
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
	}
	
	.f-els-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.n-recommendbox .recommendlist .itm .priceinfo {
		text-align: center;
		height: 0.7rem;
		line-height: 0.7rem;
		margin-top: 6px;
		font-size: 12px;
	}
	
	.v-sperate {
		height: 10px;
		background: #f1f1f1;
	}
	
	.n-goodsdetailbar {
		position: relative;
		height: 44px;
	}

	.n-goodsdetailbar .txt {
		position: absolute;
		top: 0;
		left: 0px;
		z-index: 9;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}

	.n-goodsdetailbar .v-img {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 90rpx;
	}
	
	img {
		vertical-align: middle;
		border: 0;
	}
	
	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #fff;
	}

	.m-buybar .btn-wrap {
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		background: #eb5468;
	}

	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}

	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .buynow.s-fc {
		background: #000;
	}

	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}

	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
	}

	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}

	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}

	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}

	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}

	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}

	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0,0,0,0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}

	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .hide {
		display: none;
	}
	
	.bg-white{
		/* background-color: #FFFFFF; */
	}
	
	.itm-value{
		font-weight: 500;
	}
	
	.f-els-1{
		line-height: 48rpx;
	}
	
	.recovery {
		color: #fff;
		background: #eab315;
	}
	
	.view-pro{
		color: #fff;
		background: #3b79fe;
	}
	
</style>
